<template>
  <div class="view">
    <x-header :left-options="{backText: ''}" class="vux-1px-b">会员升级</x-header>
    <member-header :data="user" @gotomember="gotomember"></member-header>
    <div class="container-fluid">
      <h3>开通等级：</h3>
      <div class="row">
        <ul>
          <li v-for="(item, index) in data" :key="index" v-show="index!=0" :class="{'active':iind === index}" @click="changecli(index)">
            {{item.account_level_name.substring(0,3)}}
            <br/>
            {{item.account_level_name.substring(3,8)}}
            <br/>
            <img v-if="item.account_level_id==1" style="width: 2rem;" src="http://img.zanjl.com/Content/img/image/VIPPT.png" alt="">
            <img v-if="item.account_level_id==2" style="width: 2rem;" src="http://img.zanjl.com/Content/img/image/VIPCZ.png" alt="">
            <img v-if="item.account_level_id==3" style="width: 2rem;" src="http://img.zanjl.com/Content/img/image/VIPCJ.png" alt="">
            <img v-if="item.account_level_id==4" style="width: 2rem;" src="http://img.zanjl.com/Content/img/image/VIPZJ.png" alt="">
            <img v-if="item.account_level_id==5" style="width: 2rem;" src="http://img.zanjl.com/Content/img/image/VIPGJ.png" alt="">
          </li>
        </ul>
      </div>
    </div>
    <div class="footrow">
      <h2 class="fttext">邀请人手机号</h2>
      <my-input style=" margin: 0 4%;" type="text" v-model="form.yqm" placeholder="请输入邀请人手机号">
        <i class="account-icon icon"></i>
      </my-input>
      <br/>
      <p class="ptext">邀请码填写说明：未填写邀请人手机号码，默认为原邀请人；填写新的邀请人号码将更换原邀请人关系。</p>
    </div>
    <button id="open" @click="openimmd()">立即开通会员</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import myInput from './components/input'
import { SET_LOADING } from '@store/type'
import memberHeader from '@comps/header/memberHeader'
import { getlevellist, GetEntityByUseryqm, GetEntityBySelleryqm, addAccountLevelOrder, isUpgradeApplication, GetUserLevelAccount, GetUpAndDown, GetEntityByMobile } from '@api'
import Vue from 'vue'
import { Confirm } from 'wc-messagebox'
import qs from 'qs'
Vue.use(Confirm)
export default {
  components: {
    memberHeader,
    myInput
  },
  data () {
    return {
      data: [],
      form: {
        yqm: ''
      },
      leveldata: [], // 保存用户上下级关系用户的邀请码信息，作用于验证输入的邀请信息
      index: 0,
      activeIndex: '',
      outt: true,
      iind: '',
      sellername: ''
    }
  },
  computed: {
    ...mapState(['user', 'token'])
  },
  methods: {
    ...mapMutations({
      setLoading: SET_LOADING
    }),
    gotomember () {
      this.$router.push('/mymember')
    },
    changecli (index) {
      console.log(index)
      // this.activeIndex = index
      this.outt = false
      this.iind = index // 选中效果
      this.index = index
      if (index === 4) {
        document.getElementById('open').innerHTML = '立即申请'
      } else {
        document.getElementById('open').innerHTML = '立即开通'
      }
    },
    async openimmd () {
      if (this.data[this.index].is_discontinued === 1) {
        return this.$toastText('当前等级暂未开放！')
      }
      if (this.form.yqm.length === 11) {
        let leu = await GetUpAndDown(this.user.user_mobile)
        if (leu && leu.code === 200) {
          let userin = await GetEntityByMobile(this.form.yqm)
          if (userin && userin.code === 200) {
            for (let i = 0; i < leu.data.length; i++) {
              if (userin.data.invitation_code === leu.data[i].Thislevel) {
                alert('您输入的手机号为当前用户手机号，无法作为您的邀请人！')
                return false
              } else if (userin.data.invitation_code === leu.data[i].Subordinate) {
                alert('您输入的手机号已被您邀请过，无法成为您的邀请人！')
                return false
              } else if (userin.data.invitation_code === leu.data[i].Lowerlevel) {
                alert('您的被邀请人已邀请过此用户，无法作为您的邀请人！')
                return false
              }
            }
          }
        }
      }

      if (this.form.yqm.length === 11 && !/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.form.yqm)) {
        this.$toastText('请输入正确的邀请人手机号码！')
        return false
      }
      let orderList = []
      let orderObj = {
        order_id: '',
        user_id: '',
        level_id: this.index + 1,
        level_name: this.data[this.index].account_level_name,
        order_monep: this.data[this.index].upgrade_standard,
        pay_type: 0,
        create_time: '',
        pay_time: null,
        remarks: ''
      }
      orderList.push(orderObj)
      let postData = {
        orders: orderList
      }
      let res = await addAccountLevelOrder(qs.stringify(postData))
      if (res && res.code === 200) {
        let userdata = await GetUserLevelAccount(this.user.user_id)
        var no = res.data.order_no
        if (this.index === 1) {
          if (Number(userdata.data) > 2) {
            alert('您选择的升级等级低于账号的当前等级！')
          } else {
            if (Number(userdata.data) === 2) {
              alert('您选择的升级等级与账号当前等级相同！')
            } else {
              this.$router.push({
                path: '/mycashier',
                query: {
                  id: no,
                  no: no,
                  price: this.data[1].upgrade_standard,
                  type: 'goods',
                  body: no,
                  attach: this.form.yqm
                }
              })
            }
          }
        } else if (this.index === 2) {
          if (Number(userdata.data) > 3) {
            alert('您选择的升级等级低于账号的当前等级！')
          } else {
            if (Number(userdata.data) === 3) {
              alert('您选择的升级等级与账号当前等级相同！')
            } else {
              this.$router.push({
                path: '/mycashier',
                query: {
                  id: no,
                  no: no,
                  price: this.data[2].upgrade_standard,
                  type: 'goods',
                  body: no,
                  attach: this.form.yqm
                }
              })
            }
          }
        } else if (this.index === 3) {
          if (Number(userdata.data) > 4) {
            alert('您选择的升级等级低于账号的当前等级！')
          } else {
            if (Number(userdata.data) === 4) {
              alert('您选择的升级等级与账号当前等级相同！')
            } else {
              this.$router.push({
                path: '/mycashier',
                query: {
                  id: no,
                  no: no,
                  price: this.data[3].upgrade_standard,
                  type: 'goods',
                  body: no,
                  attach: this.form.yqm
                }
              })
            }
          }
        } else if (this.index === 4) {
          let isres = await isUpgradeApplication()
          if (isres && isres.code === 200) {
            switch (isres.data.status) {
              case 3:
                alert('您已提交过申请，并且审核结果未通过；请联系平台客服！')
                break
              case 2:
                alert('您已成功升级为平台最高等级，无需再次申请！')
                break
              case -1:
                alert('您的申请已失效！')
                break
              default:
                this.$router.push({
                  path: '/myhighmember',
                  query: {
                    id: no,
                    no: no,
                    price: this.data[4].upgrade_standard,
                    type: 'goods',
                    body: no,
                    attach: this.form.yqm
                  }
                })
                break
            }
          } else {
            this.$router.push({
              path: '/mycheckmem',
              query: {
                id: no,
                no: no,
                price: this.data[4].upgrade_standard,
                type: 'goods',
                body: no,
                attach: this.form.yqm
              }
            })
          }
        }
      }
    },
    async getDatalist () {
      this.setLoading({
        status: true,
        opacity: 0
      })
      var usery = this.user.inviter_invitation_code
      let res = await getlevellist()
      this.setLoading(false)
      if (res && res.code === 200) {
        this.data = res.data
      } else {
        alert('不好意思，没得数据')
      }
      if (usery.length === 6) {
        let useryqm = await GetEntityByUseryqm(usery)
        if (useryqm && useryqm.code === 200) {
          this.form.yqm = useryqm.data.user_mobile
        }
      }
      if (usery.length === 8) {
        let selleryqm = await GetEntityBySelleryqm(usery)
        if (selleryqm && selleryqm.code === 200) {
          this.form.yqm = selleryqm.data.seller_invitation_code
          this.sellername = selleryqm.data.seller_name
        }
      }
    }
  },
  created () {
    this.getDatalist()
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/css/pub";
.view {
  width: 100%;

  h3 {
    margin: .25rem;
    color: #a36a10;
  }
  .container-fluid {
    margin: -3rem 0.5rem 0 0.5rem;
    padding: 0.2rem;
    border-radius: .375rem;
    background-color: #ffffff;
    background-size: cover;

    .row {
      width: 100%;
      height: 3.5rem;

      text-align: center;
      display: inline-flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      flex-direction: row;
      margin: 0 auto;      ul {
        width: 100%;
        margin: 0 auto;        li {
          float: left;
          border-radius: .125rem;
          background: #f1f1f1;
          color: #a36a10;
          width: 31%;
          margin: 0.1rem;
          height: 3rem;
          font-weight: 700;
          line-height: 1rem;
        }
      }
      .active {
        color: #ffffff;
        background-image: url("http://img.zanjl.com/Content/img/image/activebackground.png");
      }
    }
  }
  .footrow {
    background-color: #ffffff;
    margin: 0.5rem 0.5rem 0 0.5rem;
    border-radius: .375rem;
    text-align: center;
    padding: 0.2rem;
    .fttext {
      font-weight: 700;
      margin: 0.1rem auto;
    }
  }
}
button {
  background-color: #ff0036;
  border: 0;
  width: 100%;
  height: 1.175rem;
  position: fixed;
  bottom: 0;
  color: white;
  font-weight: bold;
}
.ptext {
  font-weight: bold;
  color: #999;
  word-wrap: break-word;
  margin: 0 4%;
  font-size: 0.34rem;
  line-height: .5rem;
  text-align: initial;}
</style>
